<template>
    <div>
      <pure-table
        :data="tabdata"
        :columns="initPureTableConfig(roleTableConfig)"
        showOverflowTooltip
        border
        :isShowPag="false"
      >
        <template #video="{ row }">
          <el-space>
            <sj-link custom-type="sblue" :underline="false"   @click="viewImg(row.img)"
              ><span class="mr-[10px]">照片({{ isNullOrEmpty( row.img?.length?row.img?.length:0 ) }})</span></sj-link
            >   <sj-link custom-type="sblue" :underline="false" @click="viedeoshow(row.video)"
              ><span class="mr-[10px]">视频({{ isNullOrEmpty(row.video?.length?row.video?.length:0) }})</span></sj-link
            >  
          </el-space>
        </template>
        <template #action="{ row }">
          <el-space>
            <sj-link custom-type="sblue" :underline="false" @click="info(row)"
              >查看</sj-link
            >
          </el-space>
        </template>
      </pure-table>
      <el-image-viewer
      @close="closeImgViewer"
      :url-list="imageUrl" 
      fit="none"
      v-if="showImageViewer"
    />
    </div>
  </template>
  <script setup lang="ts">
import {isNullOrEmpty,initPureTableConfig} from '@/utils/functions'
import viedeolists from "@/components/videoplay/videolistprop.vue"
  const tableData = ref({
    data: [{id:1}]
  });
  import { ref } from "vue";
  const props = defineProps({
  tabdata: {
    type: Array,
    default: []
  }
});
import {
  deviceDetection,
} from "@pureadmin/utils";
import { addDialog } from "@/components/ReDialog";
import { ElMessage, ElMessageBox } from "element-plus";
const showImageViewer=ref(false)
let imageUrl=[]
const viewImg = url => {
  if(!url || url.length<1){
    ElMessage({
      message: "暂无图片",
      type: "warning",
    });
    return
  }
  imageUrl = url;
  showImageViewer.value = true;
};
const formRef=ref(null)
const viedeoshow=(url)=>{
  if (!url || url.length < 1) {
    ElMessage({
      message: "暂无视频",
      type: "warning",
    });
    return
  }
  addDialog({
    title: `巡检视频`,
    hideFooter: true,
    width: "800px",
    draggable: true,
    fullscreen: deviceDetection(),
    props: {
      playlist:url
    },
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(viedeolists, { ref: formRef }),

  });
}
const closeImgViewer = () => {
  showImageViewer.value = false;
};
  const titles = {
    id: "编号", // id
    groupName: "所属分组", // workOrderTitle
    facilitName: "设施名称", // workOrderTitle
    projectName: "设施编号", // projectName
    workOrderType: "所属建筑", // workOrderType
    inspectionIssue: "巡检问题", // workOrderStatus
    video: "巡检信息", // waiting
  };
  const roleTableConfig = [
    // { type: "index", align: "left",label:"编号" },
      { prop: "id", label: titles.id, width:  100 },
    { prop: "groupName", label: titles.groupName },
    { prop: "facilitName", label:titles.facilitName},
    { prop: "facilitSN", label: titles.projectName },
    { prop: "buildingName", label: titles.workOrderType },
    { prop: "inspectionIssue", label: titles.inspectionIssue },
    { slot: "video", label: titles.video,width:160 },
  ];
  </script>
  